page {
	background: #f6f6f6;
}
// 颜色
.primary {
	color: $color-primary;
}
.violet {
	color: #6c28ef;
}
.sucess {
	color: $color-success;
}
.error {
	color: $color-error;
}
.price {
	color: $color-price;
}
.white {
	color: #fff;
}
.bg-primary {
	background: $color-primary;
}
.bg-white {
	background: #fff;
}
.relative {
	position: relative;
}
// 布局
.flex {
	display: flex;
	align-items: center;
	&-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&-baseline {
		display: flex;
		align-items: baseline;
	}
	&-around {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	&-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	&-end {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	&-col {
		display: flex;
		flex-direction: column;
	}
	&-1 {
		flex: 1;
	}
	&-wrap {
		flex-wrap: wrap;
	}
}
.align-stretch {
	align-items: stretch;
}
.self-end {
	align-self: flex-end;
}
.line-through {
	text-decoration: line-through;
}
// 图标大小
@for $value from 10 through 200 {
	.icon-#{$value} {
		width: $value * 1upx;
		height: $value * 1upx;
		min-width: $value * 1upx;
	}
}
// padding margin
@for $value from 0 through 100 {
	.pt-#{$value},
	.p-#{$value},
	.py-#{$value} {
		padding-top: $value * 1upx;
	}
	.pb-#{$value},
	.p-#{$value},
	.py-#{$value} {
		padding-bottom: $value * 1upx;
	}
	.pl-#{$value},
	.p-#{$value},
	.px-#{$value} {
		padding-left: $value * 1upx;
	}
	.pr-#{$value},
	.p-#{$value},
	.px-#{$value} {
		padding-right: $value * 1upx;
	}

	.m-#{$value} {
		margin: $value * 1upx;
	}
	.mx-#{$value} {
		margin: 0 $value * 1upx;
	}
	.my-#{$value} {
		margin: $value * 1upx 0;
	}
	.mt-#{$value} {
		margin-top: $value * 1upx;
	}
	.mb-#{$value} {
		margin-bottom: $value * 1upx;
	}
	.ml-#{$value} {
		margin-left: $value * 1upx;
	}
	.mr-#{$value} {
		margin-right: $value * 1upx;
	}
}

// size
@for $value from 20 through 100 {
	.size-#{$value} {
		font-size: $value * 1upx;
	}
}
@for $value from 1 through 100 {
	.border-radius-#{$value} {
		border-radius: $value * 1upx;
	}
}
// 字体
.text {
	&-center {
		text-align: center;
	}
	&-right {
		text-align: right;
	}
	&-bold {
		font-weight: bold !important;
	}
	&-med {
		font-weight: 500 !important;
	}
	&-light {
		font-weight: 200 !important;
	}
}

.gray {
	&-1 {
		color: #111;
	}
	&-3 {
		color: #333;
	}
	&-5 {
		color: #555;
	}
	&-6 {
		color: #666;
	}
	&-7 {
		color: #777;
	}
	&-8 {
		color: #888;
	}
	&-9 {
		color: #999;
	}
	&-c {
		color: #ccc;
	}
	&-d {
		color: #d0cece;
	}
}
// 按钮
.n-btn-primary {
	flex: 1;
	text-align: center;
	border-radius: 20upx;
	line-height: 100upx;
	font-size: 34upx;
	font-weight: 400;
	color: #ffffff;
	background: $color-primary;
	border: 1upx solid #fff;
}
.n-btn-plain {
	flex: 1;
	text-align: center;
	background: #fff;
	border-radius: 90upx;
	line-height: 90upx;
	font-size: 28upx;
	font-weight: 400;
	color: $color-primary;
	background: #fff;
	border: 1upx solid $color-primary;
}
// 控制隐藏行数
.line-clamp {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	&-2 {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	&-3 {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
}

.badge {
	color: #fff;
	font-size: 24upx;
	font-weight: 200;
	padding: 2upx 6upx;
	border-radius: 8upx;
	&-1 {
		background: #3ce097;
	}
	&-2 {
		background: #f49e8b;
	}
}
.bg-ligter {
	background-image: linear-gradient(63deg, rgb(244, 253, 252) 0%, rgb(220, 251, 253) 100%);
}
